import 'package:flutter/material.dart';
import 'package:flutter_demo/pages/page_with_title.dart';
import 'package:flutter_demo/widgets/app_widgets.dart';

class FlexPage extends PageWithTitle {
  const FlexPage({super.key}) : super("线性布局(Flex、Row、Column)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return const [
      PrimaryTitle("简介"),
      BodyText("与Android的LinearLayout类似，Flex负责按纵轴或横轴排布子项"),
      LabelText("- Flexible 作为子项时，按权重分配剩余空间"),
      LabelText("- Expanded 作为子项时，展开占用所有剩余空间"),
      AppSpacer.large,
      _Example(),
      AppSpacer.mini,
      UlItem("Flex"),
      LabelText("- direction，布局方向，必须设置，一般我们会直接使用Column或者Row组件，这样的名称看起来比较直观"),
      LabelText("- mainAxisAlignment，主轴对齐，若为Row或横向布局，则主轴为横向，这个属性使所有子项在横向上的对齐，若为Column则为纵向"),
      LabelText("- crossAxisAlignment，交叉轴对齐，若为Row或横向布局，则交叉轴为纵向，这个属性使所有子项在纵向上的对齐"),

      AppSpacer.large,
      UlItem("Row"),
      BodyText("横向版的Flex"),
      AppSpacer.large,
      UlItem("Column"),
      BodyText("纵向版的Flex"),

      AppSpacer.large,
      UlItem("Flexible"),
      BodyText("作为Flex子项时，按照权重分配剩余空间"),
      LabelText("- flex，整型，权重，为空或者0时表示自适应内容大小，自然数则按所有子项总权重分配剩余空间"),
      UlItem("Expanded"),
      BodyText("展开项，flex=1的Flexible组件，通常用在Flex中占用剩余空间"),
    ];
  }
}

class _Example extends StatelessWidget {
  const _Example();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Flex(
          direction: Axis.horizontal,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: List.generate(
            7,
            (index) {
              if (index < 6) {
                return Container(
                  width: 40,
                  height: 40,
                  color: Theme.of(context)
                      .colorScheme
                      .primary
                      .withAlpha((255 / 7 * (index + 1)).toInt()),
                );
              } else {
                return Expanded(
                  child: Container(
                    height: 40,
                    color: Theme.of(context).colorScheme.primary,
                  ),
                );
              }
            },
          ),
        ),
        AppSpacer.mini,
        Flex(
          direction: Axis.horizontal,
          children: List.generate(
            7,
            (index) => Flexible(
              flex: index + 1,
              child: Container(
                height: 40,
                color: Theme.of(context)
                    .colorScheme
                    .primary
                    .withAlpha((255 / 7 * (index + 1)).toInt()),
              ),
            ),
          ),
        ),
      ],
    );
  }
}
